<template>
    <a-modal :title="props.title" :visible="true" cancel-text="取消[Esc]" ok-text="确认[Enter]" @ok="handleOk" @cancel="handleCancel">
        <p>{{props.context}}</p>
    </a-modal>
</template>
<script lang="ts" setup>
import { onMounted, onBeforeUnmount } from "vue";

const props = defineProps<{
    title:string;
    context: string;
}>()

const emit = defineEmits<{
    (e:"ok"):void,
    (e:"cancel"):void
}>()

onMounted(async()=>{
    window.addEventListener("keydown",handleKeydown)
})

onBeforeUnmount(()=>{
    window.removeEventListener("keydown",handleKeydown)
})

const handleKeydown = (e:any)=>{
    e.preventDefault();
    const code = e.code;
    if(code === "Enter" || code==="NumpadEnter"){
        handleOk()
        return
    }else if(code === "Esc"){
        handleCancel()
        return
    }
}

const handleOk = ()=>{
 emit("ok");
}

const handleCancel = ()=>{
 emit("cancel")
}

</script>